<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JSX</title>
    <!-- 1.  -->
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <!-- babel 可以将 JSX 的语法转为 JS 语法 -->
    <script src="./js/babel.min.js"></script>
  </head>
  <body>
    <!-- 2.  -->
    <div id="root"></div>

    <!-- 3. 创建 script 标签 babel 会将该标签中的代码, 转为 JS 代码 -->
    <script type="text/babel">
      // 4. 创建 react 元素    React.createElement('h1', null, 'Hello React JSX')
      // let vnode = <h1 id="0425" title="hello">Hello React JSX</h1>; // JSX  JavaScript XML   
      // 多级结构
      let vnode = <div>
          <h2 className="title">浣溪沙</h2>
          <p>谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳。</p>
        </div>

      //5. 渲染
      ReactDOM.render(vnode, document.querySelector('#root'));
    </script>
  </body>
</html>
